<template>
	<view class="m-footer theme-text" :style="'--backgroundColor:'+(backgroundColor?backgroundColor:'#fff')">
		<!-- <navigator v-for="(item,index) in (list)" :key="item.index" hover-class="none" class="m-footer-item" open-type="redirect" :url="item.pagePath" :data-index="index"></navigator> -->
		<view v-for="(item,index) in (list)" :key="index" class="m-footer-item"
			@click="jumpFooter(item.pagePath,item.needLogin)">

			<image class="foot-icon" :src="footState === index ? item.selectedIconPath : item.iconPath"></image>
			<view class="foot-text" :style="'color: '+(footState === index ? selectedColor : color)">
				{{item.text}}
			</view>
			<text class="foot-badge" v-if="index == 1 && num > 0">{{num}}</text>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "Footer",
		props: {
			identity: {
				default: 1,
				type: Number
			},
			footState: {
				default: 0,
				type: Number
			},
			num: {
				default: 0,
				type: Number
			},
		},
		data() {
			return {
				backgroundColor: "#FFFFFF",
				color: "#999999",
				selectedColor: 'var(--primary)',
				list: [],
				primary: '',
				list1: [{
						"pagePath": "/pages/public/index",
						"text": "首页",
						"iconPath": "/static/footer/foot1.png",
						"selectedIconPath":this.iconPath('foot1_on.png')
					},
					{
						"pagePath": "/pages/public/communicate_list",
						"text": "沟通",
						"iconPath": "/static/footer/foot2.png",
						"selectedIconPath": this.iconPath('foot2_on.png')
					},
					{
						"pagePath": "/pages/public/find_job",
						"text": "找工作",
						"iconPath": "/static/footer/foot3.png",
						"selectedIconPath": this.iconPath('foot3_on.png'),
					},
					{
						"pagePath": "/pages/public/interview_invitations",
						"text": "面试邀请",
						"iconPath": "/static/footer/foot4.png",
						"selectedIconPath": this.iconPath('foot4_on.png'),
					},

					{
						"pagePath": "/pages/public/profile",
						"text": "我的",
						"iconPath": "/static/footer/foot5.png",
						"selectedIconPath": this.iconPath('foot5_on.png'),
					},

				],
				list2: [{
						"pagePath": "/pages/public/index",
						"text": "首页",
						"iconPath": "/static/footer/foot1.png",
						"selectedIconPath": this.iconPath('foot1_on.png'),
					},
					{
						"pagePath": "/pages/public/communicate_list",
						"text": "沟通",
						"iconPath": "/static/footer/foot2.png",
						"selectedIconPath": this.iconPath('foot2_on.png'),
					},
					{
						"pagePath": "/pages/public/find_talent",
						"text": "找人才",
						"iconPath": "/static/footer/foot3.png",
						"selectedIconPath": this.iconPath('foot3_on.png'),
					}, 
					{
						"pagePath": "/pages/public/invitation",
						"text": "面试邀请",
						"iconPath": "/static/footer/foot4.png",
						"selectedIconPath": this.iconPath('foot4_on.png'),
					},

					{
						"pagePath": "/pages/public/profile",
						"text": "我的",
						"iconPath": "/static/footer/foot5.png",
						"selectedIconPath": this.iconPath('foot5_on.png'),
					},

				]

			};
		},
		watch: {
			identity(newVal, old) {

				if (newVal == 1) {
					this.list = this.list1;
				} else if (newVal == 2) {
					this.list = this.list2;
				}

			}
		},
		created() {
			let page = this;

			if (this.identity == 1) {
				this.list = this.list1;
			} else if (this.identity == 2) {
				this.list = this.list2;
			}
		},
		methods: {
			jumpFooter(url, needLogin) {
				if (needLogin) {
					if (!this.$core.getUserinfo(true)) {
						return false;
					}
				}
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>
<style scoped>
	/* components/u-foot/index.css */
	.m-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		background-color: var(--backgroundColor);
		box-sizing: border-box;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EEEEEE;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		/* border-top: 1rpx solid #EEEEEE; */
	}

	.m-footer-border {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: var(--borderStyle);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		pointer-events: none;
		box-sizing: border-box;

	}

	.m-footer-item {
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		padding: 12rpx 10rpx 12rpx;
		height: 98rpx;

	}

	.m-footer-item .foot-icon {
		display: block;
		margin: 0 auto 7rpx;
		width: 45rpx;
		height: 45rpx;
	}

	.m-footer-item .foot-icon-big {
		display: block;
		position: relative;
		margin: 0 auto 7rpx;
		width: 45rpx;
		height: 45rpx;
	}

	.m-footer-item .foot-icon-big image {
		display: block;
		top: -66rpx;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		width: 132rpx;
		height: 132rpx;

	}

	.m-footer-item .foot-text {
		text-align: center;
		line-height: 22rpx;
		font-size: 22rpx;
	}

	.m-footer-item .foot-badge {
		position: absolute;
		right: 50%;
		top: 10rpx;
		margin-right: -45rpx;
		box-sizing: border-box;
		padding: 0 3px;
		min-width: 16px;
		height: 14px;
		line-height: 12px;
		border: 1px solid #fff;
		border-radius: 99px;
		color: #fff;
		font-size: 11px;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		background-color: #f44;
	}

	.m-footer-bg {
		display: block;
		width: 100vw;
		height: 130rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.m-footer-bg image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.m-footer-bg::after {
		content: '';
		display: block;
		width: 100%;
		height: 60rpx;
		background-color: #fff;
		position: absolute;
		left: 0;
		bottom: -17px;
	}


	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.m-footer {
			padding-bottom: calc(34px/2);
			padding-bottom: calc(constant(safe-area-inset-bottom)/2);
			padding-bottom: calc(env(safe-area-inset-bottom)/2);
		}

		.m-footer-bg {
			bottom: calc(34px/2);
			bottom: calc(constant(safe-area-inset-bottom)/2);
			bottom: calc(env(safe-area-inset-bottom)/2);
		}
	}
</style>